<template>
<div class="applyWrapper text-left" @change="def_new" :class="fix" @click="def_bodyClick">
  <div style="height: 70px;background-color: white;position: fixed;width: 100%;z-index:2">
    <zcHeader :isNav=isNav :isGoHome=isGoHome></zcHeader>
  </div>

  <div class="contentWrapper" style="position: relative;top: 70px;background-color: white;border: none" >
    <div class="headWrapper " v-show="CopyCheck">
      <div class="btn">
        <button @click="do_save(1)" v-show="!alreadyApply" :disabled="DoubleClick">保存</button>
        <button @click="do_save(2)" v-show="!alreadyApply">提交</button>
        <button @click="do_save(3)" v-show="alreadyApply">取消提交</button>
      </div>
      <div class="EndTime">
        距离活动结束还有 <span v-text="endTime" style="color: rgb(250,170,110)"></span>
      </div>
    </div>
    <!--==========提交成功后展示==========-->
    <div class="alreadyApply" v-show="alreadyApply">
      <p>申请进度</p>
      <div class="applyTime" >
        <ul v-for="(item,index) in Phases" :key="index">
          <li v-text="item.Name"></li>
          <li>
            <i :class="[index<Phases.length-1?'dash':'d',index==dashedIndex?dash2:'b']"></i>
            <img src="../assets/icon2019-5-7.png" alt="" :class="item.Date!='请等待...'?'bgShow':'b'">
          </li>
          <li v-text="item.Date"></li>
        </ul>
      </div>
      <p>基本信息</p>
    </div>
    <!--表单================-->
    <div class="ActiveTitleWrapper" style="padding-top: 30px" >
      <span class="title" >活动名称：</span>
      <i class="resourceName resourceName1 resetI" >
        <input type="text" class="input_active input" v-model="inputList.ProjectResourceName" disabled :style="{width:(SMUrl==''||SMUrl==null)?'100%':'91%'}"><a
        @click="openWindow(SMUrl)" style="width: 9%;text-align: right;display: inline-block" v-show="(SMUrl!=''&&SMUrl!=null)"> 填表说明</a>
      </i>
    </div>
    <div class="ActiveTitleWrapper">
      <span class="title" >标题：</span>
      <i class="resourceTitle resetI">
        <input type="text" class="input" v-model="inputList.Title" :disabled="isRead">
      </i>
      <span class="title">填报时间：</span>
      <i class="resourceDate resetI">
        <input type="text" class="input ipt" v-model="inputList.FillDate" id="test" :disabled="isRead" readonly="true">
        <!--<input type="text" id="test" v-model="date" class="ipt" placeholder="" >-->
      </i>
    </div>
    <!--    关键字=========-->
    <div class="ActiveTitleWrapper" v-if="keyWordShow">
      <span class="title" >关键字：</span>
      <i class="resourceName resourceName1 resetI" >
        <input type="text" class="input_active input"  v-model="inputList.Keywords" :disabled="isRead">
      </i>
    </div>
    <div class="ActiveTitleWrapper ">
      <span class="title" >作者：</span>
      <i class="resourceDate resetI" >
        <input type="text" class="input" v-model="inputList.Author" :disabled="isRead">
      </i>
      <span class="title">单位：</span>
      <i class="resourceTitle resetI" style="width: 360px">
        <input type="text" class="input bgImg" readonly @click="do_unitOut(1)" style="cursor: pointer" v-model="inputList.WorkUnitName" :disabled="isRead" :class="isRead?'bgImg2':'b'">
      </i>
      <i class="addButton resetI">
        <button @click="do_goAppendUnit" :disabled="isRead" :class="isRead?'bgImg2 bgImg3':'b'">增加单位</button>
      </i>
    </div>
    <!--=====第二作者==========-->
    <div class="ActiveTitleWrapper">
      <span class="title checkWrapper" v-if="AuthorMax>1"><input :disabled="isRead" type="checkbox" class="check " v-model="checkbox[0].checkbox" @click.stop="def_authorShow(0)" >第二作者：</span>
      <i class="resourceDegree resetI" v-show="checkbox[0].checkbox&&AuthorMax>1">
        <input type="text" class="input " v-model="inputList.AuthorSecend" :disabled="isRead">
      </i>
      <span class="title" v-if="checkbox[0].checkbox&&AuthorMax>1">所属单位：</span>
      <i class="resourceDegree resetI" style="width: 360px"  v-show="checkbox[0].checkbox&&AuthorMax>1">
        <input type="text" class="input bgImg" v-model="inputList.WorkUnitNameSecend" @click="do_unitOut(2)" :disabled="isRead" :class="isRead?'bgImg2':'b'">
      </i>
    </div>
    <div class="ActiveTitleWrapper">
      <span class="title checkWrapper" v-if="checkbox[0].checkbox&&AuthorMax>2"><input :disabled="isRead" type="checkbox" class="check " v-model="checkbox[1].checkbox" @click.stop="def_authorShow(1)">第三作者：</span>
      <i class="resourceDegree resetI" v-show="checkbox[1].checkbox&&AuthorMax>2">
        <input type="text" class="input " v-model="inputList.Author3" :disabled="isRead">
      </i>
      <span class="title" v-if="checkbox[1].checkbox&&AuthorMax>2">所属单位：</span>
      <i class="resourceDegree resetI" style="width: 360px"  v-show="checkbox[1].checkbox&&AuthorMax>2">
        <input type="text" class="input bgImg" v-model="inputList.WorkUnitName3" @click="do_unitOut(3)" :disabled="isRead" :class="isRead?'bgImg2':'b'">
      </i>
    </div>
    <div class="ActiveTitleWrapper">
      <span class="title checkWrapper" v-if="checkbox[1].checkbox&&AuthorMax>3"><input :disabled="isRead" type="checkbox" class="check " v-model="checkbox[2].checkbox" @click.stop="def_authorShow(2)">第四作者：</span>
      <i class="resourceDegree resetI" v-show="checkbox[2].checkbox">
        <input type="text" class="input " v-model="inputList.Author4" :disabled="isRead">
      </i>
      <span class="title" v-if="checkbox[2].checkbox">所属单位：</span>
      <i class="resourceDegree resetI" style="width: 360px"  v-show="checkbox[2].checkbox">
        <input type="text" class="input bgImg" v-model="inputList.WorkUnitName4" @click="do_unitOut(4)" :disabled="isRead" :class="isRead?'bgImg2':'b'">
      </i>
    </div>
    <div class="ActiveTitleWrapper">
      <span class="title checkWrapper" v-if="checkbox[2].checkbox&&AuthorMax>4"><input :disabled="isRead" type="checkbox" class="check " v-model="checkbox[3].checkbox" @click.stop="def_authorShow(3)">第五作者：</span>
      <i class="resourceDegree resetI" v-show="checkbox[3].checkbox">
        <input type="text" class="input " v-model="inputList.Author5" :disabled="isRead">
      </i>
      <span class="title" v-if="checkbox[3].checkbox">所属单位：</span>
      <i class="resourceDegree resetI" style="width: 360px"  v-show="checkbox[3].checkbox">
        <input type="text" class="input bgImg" v-model="inputList.WorkUnitName5" @click="do_unitOut(5)" :disabled="isRead" :class="isRead?'bgImg2':'b'">
      </i>
    </div>


    <div class="ActiveTitleWrapper">
      <span class="title">学段：</span>
      <i class="resourceDegree resetI" >
        <input type="text" class="input bgImg" v-model="inputList.LearnStage" :disabled="isRead" @click.stop="do_LearnStageOut" :class="isRead?'bgImg2':'b'">
        <ul v-show="LearnStageShow">
          <li v-for="(item,index) in LearnStages" v-text="item" @click.stop="do_getLearnStage(item)" ></li>
        </ul>
      </i>
      <span class="title">学科：</span>
      <i class="resourceDegree resetI " style="width: 360px" >
        <input type="text" class="input bgImg" v-model="inputList.Subject" :disabled="isRead" @click.stop="do_SubjectOut" :class="isRead?'bgImg2':'b'">
  <ul v-show="SubjectShow" class="ulFlow">
    <li v-for="(item,index) in Subjects" v-text="item" @click.stop="do_getSubject(item)"></li>
  </ul>
      </i>
    </div>
    <div class="ActiveTitleWrapper" style="position: relative;margin-top: 10px">
      <span class="title" style="position: relative;top: -80px">内容简介：</span>
      <i class="resourceDescribe resetI" >
        <textarea name="" v-model="inputList.Remark" :disabled="isRead">
        </textarea>
      </i>
    </div>
    <div v-show="isVedio">
      <div class="ActiveTitleWrapper" style="height: 46px">
        <span class="title">视频上传：</span>
        <i class="resourceDegree resetI" >
          <input type="text" class="input" v-model="inputList.File.FileName" :disabled="isRead" >
          <!--<img :src=inputList.File.SUrl v-show="!videoShow" class="video"/>-->
        </i>
        <div style="display: inline-block">
        <span class="container" style="margin: 0;padding: 0">
          <span id="proSampleUpload1"></span>
        </span >
          <span class="container" v-show="!isRead&&!isRead2"  @click="def_touchstart">
          <button id="btnSampleUpload1" v-show="Items[0].State === 'Start'" >上传</button>
          <button @click = "doPause(Items[0])" v-show="Items[0].State === 'Pause'">暂停</button>
          <button @click = "doRestore(Items[0])" v-show="Items[0].State === 'Restore'">继续</button>
          <!--<button @click = "doClear(Items[0])" v-show="Items[0].State === 'Clear'">清除</button>-->
        </span>
        </div>
        <span v-show="isRead||isRead2">
        <button @click="openWindow(inputList.File.LUrl)">预览</button><span style="color: #999;font-size: 20px" v-show="!isRead">|</span>
        <button @click="do_delate(0)"  :disabled="isRead" v-show="!isRead">删除</button>
      </span>
        <span><button @click="def_vedioOut">视频转码演示</button></span>

      </div>
      <div class="img-show" v-show="addVedioShow"  @click="openWindow(inputList.File.LUrl)">
        <img :src=inputList.File.SUrl v-show="img_show">
      </div>
      <p class="" >
        <!--<span class="titleP"></span>-->
        <span class="titleP">1、视频大小不能超过1G，如超过请用视频格式转换软件转成1G以内再上传。</span>
        <span class="titleP">2、务必确认你的视频文件类型是否是mp4文件,如果是mp4文件则无须转码,直接上传,
          否则请先转码为mp4格式再上传，转码流程请看[<span><button @click="def_vedioOut">视频转码演示</button></span>]，同时上传成功后先保存再点击<button @click="openWindow(inputList.File.LUrl)" :disabled="!addVedioShow">预览</button>查看能否播放，若不能播放请重新上传！</span>
        <span class="titleP"><a style="cursor: pointer;color: #417fff;text-decoration: underline" @click="openWindow('http://www.pcfreetime.com/formatfactory/CN/index.html')">视频格式转换地址</a></span>
      </p>
      <div class="filesUp">
        <div style="height: 30px">
          <span class="title1">附件：</span>
          <div class="filesWrapper">
            <span class="name text-center">名称</span>
            <span class="type text-center">格式类型</span>
            <span class="type text-center">文件类型</span>
            <span class="type text-center">大小</span>
            <span class="text-center">操作</span>
          </div>
        </div>
        <div style="margin-top: 2px;height: 30px" v-if="true" v-for="(item,index) in ossData2" :key="index">
          <span class="title1"></span>
          <div class="filesWrapper"  style="background-color: #ebf3f9;" >
            <span class="name text-center" style="color: black" v-text="item.Name"></span>
            <span class="type text-center" style="color: black" v-text="item.Name.split('.')[1]"></span>
            <span class="type text-center" style="color: black" v-text="item.FileType"></span>
            <span class="type text-center" style="color: black" v-text="item.FileSize"></span>
            <span class="text-center ActiveTitleWrapper">  <span>
       <button @click="openWindow(item.LUrl)">预览</button><i style="color: #999;font-size: 20px;margin: 0" v-show="!isRead">|</i>
        <button @click="do_delate(1,ossData2[index])"  :disabled="isRead" v-show="!isRead">删除</button>
      </span></span>
          </div>
        </div>
        <div style="margin-top: 2px"  v-show="CopyCheck" >
          <span class="title1" v-show="!isRead"></span>
          <div class="filesWrapper" style="background-color:#ebf3f9;" v-show="!isRead">
            <span class="name text-center"></span>
            <span class="type text-center"></span>
            <span class="type text-center"></span>
            <span class="type text-center"></span>
            <span class="text-center" style="color:#0094ff" id="btnUpFile2" >
              <span style="display: flex" >
        <span class="container" style="margin: 0;padding: 0;width: auto">
          <span id="proSampleUpload2" style="width: 100%;color:#577aae"></span>
        </span>
        <span class="container " style="width: auto" v-show="!isRead"  @click="def_touchstart">
          <button id="btnSampleUpload2" v-show="Items[1].State === 'Start'">上传</button>
          <button @click = "doPause(Items[1])" v-show="Items[1].State === 'Pause'">暂停</button>
          <button @click = "doRestore(Items[1])" v-show="Items[1].State === 'Restore'">继续</button>
          <!--<button @click = "doClear(Items[1])" v-show="Items[1].State === 'Clear'">清除</button>-->
        </span>
      </span>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="ActiveTitleWrapper" v-show="!isVedio" style="height: 46px">
      <span class="title">论文上传：</span>
      <i class="resourceDegree" style="margin-left: 0">
        <input type="text" class="input" v-model="inputList.File.FileName" :disabled="isRead">
      </i>
      <div style="display: inline-block;height: 46px" >
        <span class="container" style="margin: 0;padding: 0">
          <span id="proSampleUpload3"></span>
        </span>
        <span class="container" v-show="!isRead&&!isRead2"  @click="def_touchstart">
          <button id="btnSampleUpload3" v-show="Items[2].State === 'Start'" @change="inputChange">上传</button>
          <button @click = "doPause(Items[2])" v-show="Items[2].State === 'Pause'">暂停</button>
          <button @click = "doRestore(Items[2])" v-show="Items[2].State === 'Restore'">继续</button>
          <!--<button @click = "doClear(Items[2])" v-show="Items[2].State === 'Clear'">清除</button>-->
        </span>
      </div>
      <span v-show="isRead||isRead2">
       <button @click="openWindow(inputList.File.LUrl)">预览</button><span style="color: #999;font-size: 20px" v-show="!isRead">|</span>
        <button @click="do_delate(2)"  :disabled="isRead" v-show="!isRead">删除</button>
      </span>
    </div>
<div class="toast" v-show="toastShow">
  请不要频繁点击！
</div>
  </div>

  <cmUnitSelect v-if="unitShow" @Unit="do_getUnit($event)" @do_close="do_close" :outKey=outKey></cmUnitSelect>
  <transition name="fade">
    <div style="z-index: 999">
      <cmConfirm
        :title=mistakeTitle
        confirm="确定"
        :msg=mistakeMsg
        @confirm1="def_confirm($event)"
        v-if="mistake"
      ></cmConfirm>
    </div>

  </transition>
  <transition name="fade">
    <div style="z-index: 999">
      <makesure
        :titleConfirm="titleConfirm"
        :msgConfirm=msgConfirm
        v-if="isCofirm"
        @sure="def_makeSure($event)"
        @giveUp="def_giveUp($event)"
      ></makesure>
    </div>

  </transition>
<div class="vedioOut" v-if="vedioOut" @scroll.stop.prevent>
  <div class="video">
    <video src="http://oss.ezcsoft.com/zceducation/ZcSoft_VideoTo_Mp4_Sample.mp4" controls="controls"></video>
    <img src="../assets/cha2019-4-30.png" alt="" @click="def_vedioClose">
  </div>
</div>
  <cmNodata_model v-if="noInfo"></cmNodata_model>
</div>

</template>

<script>
  import OSS from 'ali-oss';
  import cmUnitSelect from "./common/cmUnitSelect"
  import cmConfirm from './common/cmCofirm'
  import makesure from './common/cmMakeSure'
  import zcHeader from './zcHeader'
  import cmNodata_model from './common/cmNodata_model'
    export default {
      name: "bsApplyDetail.vue",
      inject:['reload'],
      components: {
        cmUnitSelect,
        cmConfirm,
        makesure,
        zcHeader,
        cmNodata_model
      },
      data() {
        return {
          noInfo:false,
          keyWordShow:false,
          titleConfirm:'温馨提示',
          mistakeTitle:'温馨提示',
          DoubleClick:false,
          addVedioShow:false,
          toastShow:false,
          CopyCheck:true,
          isGoHome:true,
          img_show:false,
          AuthorMax:1,
          fix:'',
          vedioOut:false,
          obj:{},
          videoShow:true,
          isVedio:'',
          dash2:'',
          def_newNumber:0,
          isRead:false,
          isRead2:false,
          alreadyApply:false,//提交成功
          isNav:false,
          confirmNumber:'',
          isCofirm:false,
          msgConfirm:'',
          mistake: false,
          mistakeMsg: '',
          laydate: window.laydate, //获取全局的laydate，带入到组件中
          unitShow: false,
          outKey: '',
          formData: [
            {workUnit: ''},
            {workUnitSN: ''}
          ],
          inputList: {
            ProjectResourceName: '',
            ProjectResourceSN: '',
            TS: '',
            Title: '',
            // FillDate: '',
            Keywords: '',
            Author: '',
            WorkUnitName: '',
            LearnStage: '',
            Subject: '',
            Remark: '',
            Files: '',
            AuthorSecend: '',
            WorkUnitNameSecend: '',
            WorkUnitSN: '',
            Id: 0,
            PB_ComAttSN:'',
            File:{FileName:''},
          },
          delateData:{},
          ossData2:[],
          resrourceSN: '',
          authorShow: false,
          LearnStages: [],
          LearnStageShow: false,
          SubjectShow: false,
          Subjects: [],
          endTime: '',
          mistakeNum: '',
          Phases: [],
          SMUrl:'',
          SampleUpload: {
            SN: "",
            FileSN: "",
            State: "Start"
          },
          Items:[{
            SN: "AAA",
            FileSN: "",
            name:1,
            State: "Start",
            ProTagId:'proSampleUpload1',
            FileCfg:{ButtonId: "btnSampleUpload1", Accept: ".mp4", ExtName: ".mp4", MaxSize:"1gb"}

            },
            {
            SN: "BBB",
            FileSN: "",
            State: "Start",
            name:2,
            ProTagId:'proSampleUpload2',
            FileCfg:{ButtonId: "btnSampleUpload2",Accept: "application/pdf;application/msword;application/vnd.ms-excel;application/vnd.ms-powerpoint;application/vnd.openxmlformats-officedocument.wordprocessingml.document;application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;application/vnd.openxmlformats-officedocument.presentationml.presentation", ExtName: ".doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf",  MaxSize:"20mb"}

            },
            {
            SN: "CCC",
            FileSN: "",
            State: "Start",
            name:3,
            ProTagId:'proSampleUpload3',
            FileCfg:{ButtonId: "btnSampleUpload3",Accept: ".doc,.docx", ExtName: ".doc,.docx",MaxSize:"20mb"},

          }],
          dashedIndex:-1,
          checkbox:[{checkbox:false,showCheckbox:true},{checkbox:false,showCheckbox:false},{checkbox:false,showCheckbox:false},{checkbox:false,showCheckbox:false}],
          FillDate1:'',

        }

      },
      created() {

        try {
          let me = this;
          if(me.$route.query.resourceSN){
            me.inputList.ProjectResourceSN=me.$route.query.resourceSN
          }if(localStorage.getItem('resrourceSN')){
            me.inputList.ProjectResourceSN = localStorage.getItem('resrourceSN');
          }
          console.log(me.inputList.ProjectResourceSN);
          console.log(me.inputList);
          me.$ZcPublic.UserId = localStorage.getItem('UserId');
          /*当前日期*/
          let now = new Date();
          let date1 = now.toLocaleDateString();
          let year = date1.split('/')[0];
          let month = date1.split('/')[1];
          let day = date1.split('/')[2];
          if (month < 10) {
            month = '0' + month
          }
          if (day < 10) {
            day = '0' + day
          }
          this.FillDate1 = year + '-' + month + '-' + day;
          /*==========关键数据==================*/

          me.$ZcPublic.Server.Post({
            IsNeedLogin: 'true',
            Paras: {
              UserId: me.$ZcPublic.UserId,
              Name: 'Vue_CustomerResource',
              Action: 'Ext_ResourceApplyInfo',
              Data: {
                "ProjectResourceSN": me.inputList.ProjectResourceSN
              }
            },
            Callback: me.cb_Ext_ResourceApplyInfo,
            Scope: me
          });
          /*================'ResourceInfo',"关键信息"===========*/
          me.$ZcPublic.Server.Post({
            IsNeedLogin: 'true',
            Paras: {
              UserId: me.$ZcPublic.UserId,
              Name: 'Vue_CustomerResource',
              Action: 'Ext_ProjectResourceInfo',
              Data: {
                SN: me.inputList.ProjectResourceSN,
              }
            },
            Callback: me.cb_Ext_ProjectResourceInfo,
            Scope: me
          });
          /*===========活动控制==============*/
          me.$ZcPublic.Server.Post({
            IsNeedLogin: 'true',
            Paras: {
              UserId: me.$ZcPublic.UserId,
              Name: 'Vue_CustomerResource',
              Action: 'Ext_ProjectApply_WriteContral',
              Data: {
                SN: me.inputList.ProjectResourceSN
              }
            },
            Callback: me.cb_Ext_ProjectApply_WriteContral,
            Scope: me
          });
          /*============距离结束=========*/
          me.$ZcPublic.Server.Post({
            IsNeedLogin: 'true',
            Paras: {
              UserId: me.$ZcPublic.UserId,
              Name: 'Vue_CourseResource',
              action: 'Ext_ProjectResourceInfo',
              Data: {
                SN: me.inputList.ProjectResourceSN
                // SN:me.ApplyData.SN
              }
            },
            Callback: me.cb_endTime,
            Scope: me,
          });
          /*===========活动控制==============*/
          /*是否在提交后面阶段*/
          me.$ZcPublic.Server.Post({
            IsNeedLogin: 'false',
            Paras:{
              UserId:me.$ZcPublic.UserId ,
              Name:'Vue_CourseResource',
              action:'Ext_ProjectResourceInfo',
              Data:{
                SN:me.inputList.ProjectResourceSN
                // SN:me.ApplyData.SN
              }
            },
            Callback:me.cb_activeDetail,
            Scope:me,
          });
         let isCanWrite= sessionStorage.getItem('isCanWrite');
          if(isCanWrite=='true'){

            this.CopyCheck=true
          }if(isCanWrite=='false') {
            this.CopyCheck=false
          }
        } catch (e) {

        }
      },
      computed: {
        attrlistData() {
          let me = this;
          let attrlist = {};
          attrlist = me.inputList;
         console.log('提交数据')
         console.log(attrlist)
          return attrlist
        }
      },
      methods: {
        inputChange(){

        },
        def_touchstart(e){
          let toast=document.getElementsByClassName('toast')[0];
          toast.style.position='fixed'
          toast.style.left=e.screenX-120+'px'
          toast.style.top=e.screenY-170+'px'
          toast.style.zIndex=999
          //toast.style.backgroundColor='red'
           console.log(e)
        },
        def_bodyClick(){
          this.LearnStageShow=false;
          this.SubjectShow=false;
        },
        openWindow(index){
          window.open(index)
        },
        def_authorShow(index){
          if(this.checkbox[index].checkbox==true){
            for(let i=0;i<this.checkbox.length;i++){
              if(i>=index){
                this.checkbox[i].checkbox=false
              }
            }
          }
            let me=this
            setTimeout(()=>{
              me.inputList.IsSecendAuthor=me.checkbox[0].checkbox
              me.inputList.IsAuthor3=me.checkbox[1].checkbox
              me.inputList.IsAuthor4=me.checkbox[2].checkbox
              me.inputList.IsAuthor5=me.checkbox[3].checkbox
              if(!me.inputList.IsSecendAuthor){
                me.inputList.WorkUnitNameSecend='';
                me.inputList.AuthorSecend=''
              }
              if(! me.inputList.IsAuthor3){
                me.inputList.WorkUnitName3='';
                me.inputList.Author3=''
              }
              if(! me.inputList.IsAuthor4){
                me.inputList.WorkUnitName4='';
                me.inputList.Author4=''
              }
              if(! me.inputList.IsAuthor5){
                me.inputList.WorkUnitName5='';
                me.inputList.Author5=''
              }
            },100)

        },
        def_vedioOut(){
          this.vedioOut=true
          this.fix='fix'
          // document.removeEventListener('scroll', this.scrollFun, false);
        },
        def_vedioClose(){
          this.vedioOut=false
          this.fix=''
        },
        def_dash(){
          let me=this
          me.dash2='dash'
          setTimeout(()=>{
            me.dash2='dash2'
          },600)
        },
        def_new(){
          this.def_newNumber=1
        },
        def_makeSure(){
          let me=this
          me.isCofirm=false
          if(me.confirmNumber==2){
            me.inputList.PB_ComAttSN='';
            me.inputList.File.FileName='';
            me.inputList.File.SUrl='';
            me.img_show=false;
            me.isRead2=false;
            this.addVedioShow=false;
            window.document.getElementById('proSampleUpload1').innerText=''
            window.document.getElementById('proSampleUpload3').innerText=''
            me.videoShow=true;
          }if(me.confirmNumber==1){
            me.ossData2.forEach((item,index)=>{
              if(item==me.delateData){
                me.ossData2.splice(index,1)
              }
            })
            me.inputList.Files.forEach((item,index)=>{
              if(item.File==me.delateData){
                me.inputList.Files.splice(index,1)
                 window.document.getElementById('proSampleUpload2').innerText=''
              }
            })
          }if(me.confirmNumber==3){

            me.$ZcPublic.Server.Post({
              IsNeedLogin: 'true',
              Paras:{
                UserId: me.$ZcPublic.UserId ,
                Name:'Vue_CourseResource',
                action:"Ext_ResourceApplySubmit",
                Data:{
                  TS:me.inputList.TS,
                  SN:me.inputList.SN
                }
              },
              Callback:me.cb_Ext_ResourceApplySubmit,
              Scope:me,
            });
          }if(me.confirmNumber==4){
            me.$ZcPublic.Server.Post({
              IsNeedLogin: 'true',
              Paras:{
                UserId: me.$ZcPublic.UserId ,
                Name:'Vue_CourseResource',
                action:"Ext_ResourceApplyUpdoSubmit",
                Data:{
                  // TS:me.inputList.TS,
                  SN:me.inputList.SN
                }
              },
              Callback:me.cb_Ext_ResourceApplyUpdoSubmit,
              Scope:me,
            });
          }if(this.mistakeNum==1){
            this.mistakeNum = '';
            // this.$ZcPublic.UserId = '';
            localStorage.setItem("JumpKey", window.location.href);
            this.$router.push('bsLogin')

          }
        },
        def_giveUp(){
          this.isCofirm=false
          if(this.mistakeNum==1){
            this.mistakeNum=''
            if(localStorage.getItem("JumpKey") != 'null' && localStorage.getItem("JumpKey") != '' && localStorage.getItem("JumpKey") != undefined) {
              window.location.href = localStorage.getItem("JumpKey")
              localStorage.removeItem('JumpKey')
            }else {
              this.$router.push('yw_Home')

            }
          }
        },
        def_confirm() {
          this.mistake = false;
          if (this.mistakeNum == 1) {

          }
        },
        do_delate(index,item){
          this.isCofirm=true;
          this.msgConfirm='确定要删除？'
          this.delateData=item
          if(index==2||index==0){
            this.confirmNumber=2
          }if(index==1){
            this.confirmNumber=1

          }
        },
        do_unitOut(index) {
          this.unitShow = true
          this.outKey = index
        },
        do_getUnit(data) {
          this.unitShow = false;
          console.log(data);
          if (data.outKey == 1) {
            this.inputList.WorkUnitName = data.workUnit;
            this.inputList.WorkUnitSN = data.workUnitSn
          }
          if (data.outKey == 2) {
            this.inputList.WorkUnitNameSecend = data.workUnit;
          }
          if (data.outKey == 3) {
            this.inputList.WorkUnitName3 = data.workUnit;
          }
          if (data.outKey == 4) {
            this.inputList.WorkUnitName4 = data.workUnit;
          }
          if (data.outKey == 5) {
            this.inputList.WorkUnitName5 = data.workUnit;
          }
        },
        do_close() {
          this.unitShow = false
        },
        do_goAppendUnit() {
          localStorage.setItem('addUnit', 'isApplyDetail')
          this.$router.push('/bsAppendUnit')
        },
        do_getLearnStage(item) {
          let me = this
          this.LearnStageShow=false
          me.inputList.LearnStage = item;
        },
        do_LearnStageOut() {
          this.LearnStageShow = !this.LearnStageShow
        },
        do_SubjectOut() {
          this.SubjectShow = !this.SubjectShow;
        },
        do_getSubject(item) {
          this.inputList.Subject = item
          this.SubjectShow=false
        },
        /*=====保存=========*/
        do_save(index) {
          try {
            let me = this
            if(index == 1||index == 2){
              if(this.keyWordShow==true){
                if (this.attrlistData.Keywords == ''||this.attrlistData.Keywords == null) {
                  this.mistake = true;
                  this.mistakeMsg = '请输入关键字！'
                  return
                }
              }
              if(this.keyWordShow == true){
                if (this.attrlistData.Remark == ''||this.attrlistData.Remark == null) {
                  this.mistake = true;
                  this.mistakeMsg = '请输入内容简介！'
                  return
                }
              }
            }
            if (index == 1) {
              me.DoubleClick = true;
              setTimeout(() => {
                me.DoubleClick = false;
              }, 1000)
              //alert(me.DoubleClick)
              console.log(this.inputList.FillDate)
              console.log(this.FillDate1)

              me.$ZcPublic.Server.Post({
                IsNeedLogin: 'true',
                Paras: {
                  UserId: me.$ZcPublic.UserId,
                  Name: 'Vue_CourseResource',
                  action: "Ext_ResourceApplySave",
                  Data: me.attrlistData
                },
                Callback: me.cb_Ext_ResourceApplySave,
                Scope: me
              })
            }
            if (index == 2) {
              let inputL = JSON.parse(sessionStorage.getItem("inputL"));
              let inputListFiles = false;
              //   let inputListFile=[...this.inputList.File.FileName]
              console.log(inputL.Files);
              console.log(inputListFiles);
              this.inputList.Files.forEach((item) => {
                if (item.TS == null) {
                  inputListFiles = true
                }
              })
              if (inputL.Subject != this.inputList.Subject || inputL.WorkUnitName != this.inputList.WorkUnitName || inputL.WorkUnitNameSecend != this.inputList.WorkUnitNameSecend
                || inputL.File.FileName != this.inputList.File.FileName || inputListFiles) {
                this.def_newNumber = 1
              }
              if (this.def_newNumber == 1) {
                this.mistake = true;
                this.mistakeMsg = '请先保存再提交！';
                this.def_newNumber = 0
              } else {
                this.isCofirm = true;
                this.msgConfirm = '提交后不能更改，如需更改需在申报期内取消提交，才能更改！';
                // this.msgConfirm='在申报期内可以取消提交，取消提交后可以更改内容，更改完后请再提交！';
                this.confirmNumber = 3
              }
            }
            if (index == 3) {

              this.isCofirm = true;
              this.msgConfirm = '在申报期内可以取消提交，取消提交后可以更改内容，更改完后请再提交！';
              this.confirmNumber = 4
            }
          } catch (e) {

          }
        },
        /*====================回调=====================*/
        cb_activeDetail(resJson,scope) {
          console.log('活动控制')
          console.log(resJson)
          if (!resJson.success) {
            this.mistake = true;
            this.mistakeMsg = resJson.msg
          } else {
            this.AuthorMax = parseInt(resJson.data.AuthorMax)
            if (this.AuthorMax < 1) {
              this.AuthorMax = 1
            }
          }
        },
        cb_Ext_ResourceApplySave(resJson, scope) {//============保存回调
          console.log('保存回调')
          console.log(resJson)
          if (resJson.success) {
           this.reload()
            this.inputList.TS = resJson.data.TS
          } else {
            this.mistake = true;
            this.mistakeMsg = resJson.msg
          }
        },
        cb_Ext_ResourceApplySubmit(resJson,scope) {
          console.log('提交返回')
          console.log(resJson)
          if (resJson.success) {
            this.reload()
          } else {
            this.mistake = true;
            this.mistakeMsg = resJson.msg
          }
        },
        /*=======取消提交============*/
        cb_Ext_ResourceApplyUpdoSubmit(resJson,scope) {
          console.log('取消返回')
          console.log(resJson)
          if (resJson.success) {
            this.reload()
          } else {
            this.mistake = true;
            this.mistakeMsg = resJson.msg
          }
        },
        cb_Ext_ProjectResourceInfo(resJson, scope) {
          console.log('ResourceInfo', "关键信息")
          console.log(resJson)
          if(resJson.success) {
            if (resJson.data.ProjectType.indexOf("优秀论文") >= 0) {
              this.isVedio = false
            } else {
              this.isVedio = true
            }
            this.LearnStages = resJson.data.SelectLearnStage.split(',');
            this.Subjects = resJson.data.SelectSubjects.split(',')
            this.$nextTick(() => {
              if (this.inputList.LearnStage == null || this.inputList.LearnStage == '') {
                this.inputList.LearnStage = this.LearnStages[0]
              }
              if (this.inputList.Subject == null || this.inputList.Subject == '') {
                this.inputList.Subject = this.Subjects[0]
              }
            })
          }
        },
        cb_Ext_ProjectApply_WriteContral(resJson, scope) {
          console.log('控制活动信息')
          console.log(resJson)
        },
        cb_Ext_ResourceApplyInfo(resJson, scope) {
          console.log('表单所有关键数据')
          console.log(resJson)
          try {
            if (resJson.success == false) {
              if (resJson.msg.indexOf("请重新登录!") >= 0) {
                this.isCofirm = true;
                this.msgConfirm = "尊敬的用户您还没登录，请确认是否登录！"
                this.mistakeNum = 1
              }
            } else {
              this.inputList = resJson.data[0]
              // if(this.inputList.)
              if(this.inputList.File==null){
                this.inputList.File={}
                this.inputList.File.FileName=''
              }if(this.inputList.File.FileName!='') {
                this.isRead2 = true;
                this.img_show = true;
                this.addVedioShow = true;
              }
              // this.ossData2=this.inputList.Files.File;
              this.inputList.Files.forEach((item)=>{
                item.File.Name=item.File.FileName
                this.ossData2.push(item.File)
              })
              if (this.inputList.FillDate==''){
                this.inputList.FillDate= this.FillDate1
              }

              if(resJson.data[0].IsSubmit=="true"){
                this.isRead=true
                this.alreadyApply=resJson.data[0].IsSubmit;
                let me = this;
                me.$ZcPublic.Server.Post({
                  IsNeedLogin: 'true',
                  Paras: {
                    UserId: me.$ZcPublic.UserId,
                    Name: 'Vue_CourseResource',
                    action: "Ext_EvaluationCollection",
                    Data: {
                      ProjectResourceSN: me.inputList.ProjectResourceSN,
                      ResourceApplySN: me.inputList.SN,
                    }
                  },
                  Callback: me.cb_Ext_EvaluationCollection,
                  Scope: me,
                });

              }
              let me=this
              me.$nextTick(()=>{
                setTimeout(()=>{
                  if(me.inputList.IsSecendAuthor=="true"){
                    me.checkbox[0].checkbox=true
                  }
                  if(me.inputList.IsAuthor3=="true"){
                    me.checkbox[1].checkbox=true
                  }
                  if(me.inputList.IsAuthor4=="true"){
                    me.checkbox[2].checkbox=true
                  }
                  if(me.inputList.IsAuthor5=="true"){
                    me.checkbox[3].checkbox=true
                  }
                },800)

              })
              if(this.inputList.FillDate==''||this.inputList.FillDate==null){
                this.inputList.FillDate=this.FillDate1
                this.$set(this.inputList,"FillDate",this.FillDate1)
                console.log('页面提交数据')
                console.log(this.inputList)
              }

            }
      if(this.inputList.Author==''||this.inputList.Author==null){
        this.inputList.Author=sessionStorage.getItem("userName")
      }if(this.inputList.WorkUnitName==''||this.inputList.WorkUnitName==null){
              this.inputList.WorkUnitName=sessionStorage.getItem("workUnitN")
              this.inputList.WorkUnitSN=sessionStorage.getItem("WorkUnitSN")
            }
            sessionStorage.setItem("inputL",JSON.stringify(this.inputList))
          }catch (e) {
            console.log(e)
          }

        },
        cb_endTime(resJson, scope) {
          // console.log("距离结束")
          // console.log(resJson)
          if (resJson.success) {
            this.endTime = resJson.data.dqdate + '天';
            if (resJson.data.ProjectType.indexOf("优秀论文") >= 0) {
              // alert(4)
              this.isVedio = false
            } else {
              this.isVedio = true
            }
            if (resJson.data.ProjectType.indexOf("优质课展评") >= 0) {
              this.keyWordShow = false
            } else {
              this.keyWordShow = true
            }
            this.SMUrl = resJson.data.SMUrl
            //alert(SMUrl!=''&&SMUrl!=null)
          }
        },
        cb_Ext_EvaluationCollection(resJson, scope) {
          console.log('申请进度')
          console.log(resJson)
          let me=this
          if (resJson.success) {
            me.Phases = resJson.data
            me.Phases.forEach((item,index)=>{
              if(item.Date==''){
                item.Date='请等待...'
              }
              if(item.Date!='请等待...'){
                this.dashedIndex++
                if(this.dashedIndex>3){
                  this.dashedIndex=3
                }
              }
            })
            console.log(me.Phases)
          }
          sessionStorage.setItem("inputL",JSON.stringify(this.inputList))
        },
        /*=============上传文件=======================*/
        doPause(item) {
          let me = this;
          //item.State = "Restore";
          me.$nextTick(function() {
            //item.Uploader.Client.cancel();
            me.$ZcPublic.AliUp.doPause({
              State:'Restore',
              UserData:item,
              fnChangeState:me.cbChangeState,
              fnUpingError:me.cbUpingError,
              Scope:me
            });
          });
        },
        doRestore(item) {
          let me = this;
          //item.State = "Pause";
          me.$nextTick(function() {
            me.$ZcPublic.AliUp.doNormRestore({
              State:'Pause',
              UserData:item,
              fnUpingProgress:me.cbUpingProgress,
              fnUpingSuccess:me.cbUpingSuccess,
              fnUpingError:me.cbUpingError,
              fnChangeState:me.cbChangeState,
              Scope:me
            });
          });
        },
        doClear(item) {
          let me = this;
          item.State = "Start";
          item.FileSN = "";
          item.Uploader.ProgTag.innerText = "";
        },
        doInitUp() {
          let me = this;
          // 调用上传-开始
          me.Items.forEach((item,index)=>{
            item.Uploader = {};
            item.Uploader.ProgTag = document.getElementById(item.ProTagId);
            me.$ZcPublic.AliUp.doInit({
              State: "Pause",
              AliOss:OSS,
              UserData:item,
              FileCfg:item.FileCfg,
              fnFileAdded:me.cbFileAdded,
              fnUpingProgress:me.cbUpingProgress,
              fnUpingSuccess:me.cbUpingSuccess,
              fnChangeState:me.cbChangeState,
              fnUpingError:me.cbUpingError,
              Scope:me
            });
          })

          // 调用上传
        },
/*==============上传回调===========*/
        cbFileAdded(options) {
          options.UserData.State = "Pause";
        },
        cbUpingProgress(percent, options) {
          options.UserData.Uploader.ProgTag.innerText = "完成:" + percent + "%";
        },
        cbUpingSuccess(resJson, options) {
          options.UserData.Uploader.ProgTag.innerText = "";
          options.UserData.State = "Start";

       if(!resJson.success){
            this.mistake=true;
            this.mistakeMsg=resJson.msg;
            window.document.getElementById('proSampleUpload2').innerText='上传失败'
          }
          else {
            console.log(options)
            console.log('上传完成-结果',resJson);

            if(options.UserData.name==3||options.UserData.name==1){
              this.img_show=true;
              this.inputList.PB_ComAttSN=resJson.data.SN;
              this.inputList.File.FileName=resJson.data.FileName;
              this.inputList.File.SUrl=resJson.data.SUrl
              this.inputList.File.LUrl=resJson.data.LUrl
              this.videoShow=false;
              this.addVedioShow=true;
              this.isRead2=true;
            }if(options.UserData.name==2){
              options.UserData.State = "Start";
              let ossData={};
              ossData.ProjectResourceSN=this.inputList.SN;
              ossData.PB_ComAttSN=resJson.data.SN;
              ossData.Name=resJson.data.FileName;
              ossData.FileType=resJson.data.FileType;
              ossData.FileSize=resJson.data.FileSize;
              ossData.LUrl=resJson.data.LUrl;
              ossData.SUrl=resJson.data.SUrl;
              this.ossData2.push(ossData);
              this.inputList.Files.push(ossData)
              // window.document.getElementById('proSampleUpload3').innerText=''
              console.log(155)
              console.log(this.inputList)
            }
          }
        },
        cbChangeState(options) {
          if (options.State === 'Pause') {
            options.UserData.State = "Pause";
          }
          if (options.State === 'Restore') {
            options.UserData.State = "Restore";
          }
        },
        cbUpingError(err, options) {
          console.log('cbUpingError-err',err);
          if(err.errCode=='errFileSize'||err.errCode=="errFileType"||err.errCode=="errUnKnow"){
            this.mistake=true;
            this.mistakeMsg=err.msg
          }
          let me=this
          if(err.errCode=="errLessTime"){
            me.toastShow=true;
            setTimeout(()=>{
              me.toastShow=false
            },300)
          }
        },
      },
      mounted() {
        this.$nextTick(()=>{
          this.laydate.render({
            elem: '#test',
            format: 'yyyy-MM-dd',
            done: (value) => {
              this.inputList.FillDate = value
            }
          });
        })

        let me = this;
        me.doInitUp();
        me.def_dash();
        setInterval(me.def_dash,1000);
      },
      watch:{
      //   inputList:{
      //     handler(newItem,oldItem){
      //      console.log(newItem)
      //      console.log("5446556")
      //      console.log(oldItem)
      //
      //   },
      //     // immediate: true,
      //     deep:true
      //
      // }
      },

    }
</script>

<style scoped>
  *{
    font-size: 14px;
  }
  i{
    font-style: normal ;
    margin: 0 8px;
    cursor: pointer;
    color: #577aae;
  }
  .resetI{
    margin: 0;
  }
  .title{
    display: inline-block !important;
    width: 136px !important;
    height: 46px !important;
    text-align: right !important;
  }
  .applyWrapper{
    width: 100%;
    padding-bottom: 100px;
  }
 .applyWrapper .contentWrapper{
   width: 1080px;
   margin: 0 auto;
   border: 1px solid gainsboro;
   /*height: 500px;*/
   padding: 5px;
   padding-bottom: 50px;
   z-index: 0 !important;
 }
  .headWrapper{
   position: relative;
    height: 40px;
    border-bottom: 1px solid gainsboro;
   line-height: 40px;
  }
  .headWrapper .btn{
    position: absolute;
    left: 0px;
    /*width: 150px;*/
    /*background-color: gainsboro;*/
  }
  .headWrapper .btn button{
    background-image: url(../assets/footImg2019-4-30.png);
    background-size: 100% 100%;
    padding: 5px 20px;
    font-size: 15px;
    color: #fff;
    border-radius: 2px;
    border: none;
    cursor: pointer;
    position: relative;
    top: -5px;
  }
  .headWrapper .btn button:first-child{
    margin-right: 10px;
  }
  .headWrapper .EndTime{
 position: absolute;
    text-align: right;
    color: #127cc0;
    font-size: 15px;
    right: 0;
    /*top: 4px;*/
  }
  .ActiveTitleWrapper{
    line-height: 46px;
    position: relative;
  }
  .resourceName{
    height: 46px;
  }
  .resourceName1{
    display: inline-block;
    height: 46px;
    width: 874px;
  }
.input{
    width: 100%;
    height: 30px;
    line-height: 30px;
    border: 1px solid #91a8c9
  }
  .resourceTitle{
  display: inline-block;
    height: 46px;
 width: 508px;
}
.resourceDate{
  display: inline-block;
  height: 46px;
  width: 223px;
}
.addButton{
  padding-left: 20px;
  width: 80px;
  height: 46px;
}
  .addButton button{
height: 40px;
    line-height: 30px;
    border: none;
    background-image: url(../assets/footImg2019-4-30.png);
    background-size: 100% 100%;
    color: #fff;
    border-radius: 2px;
    cursor: pointer;
    padding: 5px 15px;
    /*position: relative;*/
    /*top: 2px;*/
  }
  .resourceDegree{
    display: inline-block;
    width: 369px;
    position: relative;
  }
  .resourceDegree ul{
    position: absolute;
    top: 37px;
    list-style: none;
    z-index: 100;
    border: 1px solid #91a8c9;
    padding: 0;
    margin: 0;
    width: 100%;
    background-color: white;
  }
  .resourceDegree ul li{
    height: 25px;
    line-height: 25px;
  }
  .resourceDegree ul li:hover{
    background-color: #0094ff;
    color: white;
    cursor: pointer;
  }
  .ulFlow{
    /*height: 100px;*/
    max-height: 250px;
    overflow: auto;
  }
  .resourceDescribe{
    display: inline-block;
    width: 873px;
  }
  textarea{
    font-size: 14px;
    border: 1px solid #91a8c9;
    min-height: 100px;
    line-height: 20px;
    padding: 6px;
    width: 100%;
    box-sizing: border-box;
    color: #444;
   outline: none;
  }
  .contentWrapper p{
    padding-bottom: 15px;
    width: 100%;
  }
  .contentWrapper p .titleP{
    display: inline-block;
    width: 100%;
    text-align: start;
    padding-left: 133px;
    line-height: 1.8;
  }
  .filesWrapper{
    display: inline-block;
    width: 873px;

  }
  .filesWrapper:nth-child(2){

  }
  .filesWrapper span{
    float: left;
    height: 30px;
    line-height: 30px;

    border-right: 1px solid white;
   color: white;
  }
  .filesWrapper .name{
    width: 350px;
  }
  .filesWrapper .type{
    width: 110px;
  }
  .filesWrapper span:last-child{
    width: 191px;
    border-right: none;
  }
.filesUp{
  position: relative;
  /*height: 100px;*/
}
  .filesUp div:nth-child(1)>div{
    background-color:#127cc0;
  }
  .filesUp div:nth-child(2)>div{
    background-color: #ebf3f9
  }
  .filesUp div:nth-child(3)>div{
background-color: #fcf7f0
  }
  .filesUp .title1{
    position: relative;
    display: inline-block ;
    width: 136px ;
    height: 30px ;
    line-height: 30px;
    text-align: right;
    top: -10px;
  }
  .checkWrapper{
    position: relative;
  }
  .checkWrapper .check{
    position: relative;
    top:2px;
    left: -2px;
    cursor: pointer;
  }
  .ActiveTitleWrapper .bgImg{
    background: url('../assets/icon_center22019-5-6.png') 98% center no-repeat;
  }
  .bgImg2{
    background-color: #ebebe4 !important;
    background-image: none !important;
  }
  .bgImg3{
    color: black !important;
  }
span button{
    border: none;
    height: 25px;
    line-height: 22px;
    padding: 3px;
    /*background-color: white;*/
  background: transparent;
    cursor: pointer;
    color: #577aae;

  }
  /*===申请进度=====*/
  .alreadyApply {
    width: 100%;
    padding: 10px;
  }
  .alreadyApply p{
    width: 100%;
    height: 30px;
    line-height: 30px;
    background: #d7e6ef;
    padding: 0 5px;
    font-weight: bold;
  }
  .applyTime{
    height: 150px;
    width: 100%;
    /*padding-left: 60px;*/
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .applyTime ul{

    list-style: none;
    width: 138px;
    float: left;
    /*border: 1px solid red;*/
    padding: 0;
    margin: 0;
    /*margin-top: 30px;*/
    text-align: center;
  }
  .applyTime ul li{
    height: 20px;
    /*overflow: hidden;*/
    position: relative;
  }

  .dash{
    width: 122px;
    height: 0;
    border-bottom: 2px solid #0094ff;
    position: absolute;
    top:9px;
    left: 53%;
    z-index: 100;
  }
  .dash2:nth-child(1){
    width: 122px;
    height: 0;
    border-bottom: 2px dashed #0094ff;
    position: absolute;
    top:9px;
    left: 53%;
    z-index: 100;
  }
  .applyTime ul img{
    height: 18px;
    width: 148px;
    position: absolute;
    left: 0;
    z-index: 1;
  }
  .video{
  width: 150px;
  height: 100px;
    margin-left: 90px;
  }
  .vedioOut{
    position: fixed;
    width: 100%;
    top:0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
  }
  .vedioOut .video{
    width:800px;
    height:630px;
   position: relative;
    top: 50%;
    left: 50%;
    margin-top: -280px;
    margin-left:-400px;
    /*background-color: white;*/
  }
  video{
    width: 100%;
    height: 100%;
  }
  .video img{
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    margin-right: -15px;
    cursor: pointer;
  }
  .img-show{
    width: 200px;
    height: 120px;
    border:1px solid #91a8c9;
    margin-left: 140px;
    position: relative;
  }
  .img-show:after{
  content: '';
  position: absolute;
  width: 52px;
  height:0 ;
  left: 50%;
  top: 50%;
    margin-left: -25px;
  border: 1px solid #91a8c9;
    z-index: -1;
  }
  .img-show:before{
  content: '';
  position: absolute;
  height: 52px;
  width:0 ;
  left: 50%;
  top: 50%;
    z-index: -1;
    margin-top: -25px;
  border: 1px solid #91a8c9;
  }
  .img-show img{
    width: 100%;
    height: 100%;
  }
  .fix{
    position: fixed !important;
    top:-300px
  }
  .bgShow{
    background-color: #0094ff;
  }
  .toast{
    padding: 9px 0 0 16px;
    width: 140px;
    height: 40px;
    background-color: #383838;
    color: white;
    border-radius: 15px;
/*    position: absolute;
    bottom: 15%;
    left: 50%;
    margin-left: -70px;*/

  }
  /*彈出框*/
  .fade-enter-active {
    transition: opacity .5s;
  }
  .fade-leave-active{
    transition: opacity .1s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
  .fade-enter-to, .fade-leave {
    opacity: 1;

  }
</style>
